<template>

  <a-trigger trigger="click">
    <a-input v-model="result" placeholder="点击选择图标" readonly  >
      <template #suffix>

        <component :is="result" v-if="result" :size="20" style="color: rgba(var( --primary-6))"/>

      </template>
    </a-input>

    <template #content>
      <div class="main">
        <a-input placeholder="搜索图标" style="width: 100%" @input="onSearch"   >
          <template #suffix>
            <icon-search/>
          </template>
        </a-input>


        <a-grid :cols="4" :col-gap="4" :row-gap="4" class="icon-wrapper">
          <a-grid-item v-for="(item,index) in iconObj.showRs" :key="index" class="item" @click="selectIcon(item)">
            <span class="icon">
            <component :is="item" :size="24"/>
              </span>
            <small>{{ item }}</small>
          </a-grid-item>


        </a-grid>
        <a-pagination v-model:current="iconObj.queryForm.current" simple :total="iconObj.queryForm.total"
                      @change="pageChange"/>
      </div>
    </template>
  </a-trigger>

</template>

<script lang="ts" setup name="smart-icon-picker">
import {ref, reactive} from 'vue'
import * as arcoIcons from '@arco-design/web-vue/es/icon';

const props = defineProps({
  modelValue: {
    type: String,
    require: true
  },


})
const emit = defineEmits(['update:modelValue'])



const camelToUnderline = (str) => {
  const x = str.replace(/([A-Z])/g, "-$1").toLowerCase()
  if (x.startsWith("-")) {
    return x.replace("-", "")
  }
  return x;

}
const FULL_ICON_LIST = Object.keys(arcoIcons).map(x => camelToUnderline(x));

const result = ref(props.modelValue)

const iconObj = reactive({
  searchRs: Array.from(FULL_ICON_LIST),
  showRs: [],
  queryForm: {
    current: 1,
    total: 0,
    pageSize: 20,
    title: '',
  },
})

const fetchData = () => {
  const start = (iconObj.queryForm.current - 1) * iconObj.queryForm.pageSize
  const end = (iconObj.queryForm.current) * iconObj.queryForm.pageSize
  iconObj.showRs = iconObj.searchRs.filter((item, index) => index >= start && index <= end - 1)
  iconObj.queryForm.total = iconObj.searchRs.length
}


const onSearch = (e) => {
  iconObj.searchRs = FULL_ICON_LIST.filter((item) => item.indexOf(e) !== -1)
  iconObj.queryForm.current = 1
  fetchData()
}

fetchData()


const pageChange = (e) => {
  iconObj.queryForm.current = e;
  fetchData()
}

const selectIcon = (e) => {
  result.value = e
  emit('update:modelValue', e)
}


</script>


<style lang="less" scoped>
.main {
  width: 300px;
  height: 400px;
  padding: 4px;
  background-color:var(--color-bg-1);



  .icon-wrapper {
    width: 100%;
    text-align: center;

    padding:   6px;


    cursor: pointer;
    background-color: @color-bg-1;

    .item {
      margin:4px;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      .icon {
        width: 100%;
        text-align: center;
      }

      small {
        width: 100%;
        margin-top: 4px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

  }


}


</style>